<template>
  <div class="w-[1150px] relative bg-white print-style p-6 h-full">
    <div class="flex justify-between w-full text-center items-center">
      <div class="flex-1 text-center text-[32px]">{{ getSystemConfig('HISNAME') }}</div>
      <!-- <BaseBarcode :value="tableData[0]?.barcode" class="w-60 text-right" /> -->
    </div>
    <div class="text-center text-[22px] font-bold">护士排班表</div>
    <!-- <div class="flex w-full justify-center items-center">
      <div class="text-4xl text-center">护士排班表</div>
    </div> -->

    <div class="flex justify-between items-center mt-5 mb-3">
      <div class="ml-10">{{ tableData[0]?.bqmc }}</div>
      <div>打印时间：{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</div>
    </div>
    <div class="flex-1">
      <div class="print-table">
        <div class="flex">
          <div class="print-table-item w-[137.5px] h-[40px] flex items-center justify-center">护士</div>
          <div class="flex">
            <div v-for="(item, index) in week" :key="index" class="print-table-item w-[137.5px] h-[40px] flex items-center justify-center">
              {{ dayjs(weekTime[0]).add(index, 'day').format('MM-DD') }}{{ item }}
            </div>
          </div>
        </div>

        <div v-for="(item, index) in tableData" :key="index" class="flex">
          <div class="print-table-item w-[137.5px] h-[50px] flex items-center justify-center">{{ item.hsmc }}</div>
          <div class="print-table-item w-[137.5px] h-[50px] flex items-center justify-center">{{ item.MonBz }}</div>
          <div class="print-table-item w-[137.5px] h-[50px] flex items-center justify-center">{{ item.TueBz }}</div>
          <div class="print-table-item w-[137.5px] h-[50px] flex items-center justify-center">{{ item.WenBz }}</div>
          <div class="print-table-item w-[137.5px] h-[50px] flex items-center justify-center">{{ item.ThuBz }}</div>
          <div class="print-table-item w-[137.5px] h-[50px] flex items-center justify-center">{{ item.FriBz }}</div>
          <div class="print-table-item w-[137.5px] h-[50px] flex items-center justify-center">{{ item.SatBz }}</div>
          <div class="print-table-item w-[137.5px] h-[50px] flex items-center justify-center">{{ item.SunBz }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { getSystemConfig } from '@/utils/systemConfig'

const props = defineProps({
  printData: {
    type: Object,
    default: () => ({})
  },
  weekTime: {
    type: Array,
    default: () => []
  },
  week: {
    type: Array,
    default: () => []
  }
})

const tableData = ref({})

watch(
  () => props.printData,
  () => {
    if (props.printData.printData.detail.length > 0) {
      tableData.value = props.printData.printData.detail
    }
  }
)
</script>
<style lang="less" scoped>
.table-border {
  @apply border border-solid  p-1;
}
</style>
